<template>
  <view class="finance-center">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">财务中心</text>
    </view>

    <!-- Tabs切换 -->
    <view class="tabs-container">
      <view class="tabs">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="switchTab(index)"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>

    <!-- 日报表 -->
    <view v-if="activeTab === 0" class="report-content">
      <!-- 筛选区域 -->
      <view class="filter-section">
        <view class="filter-row">
          <view class="filter-item">
            <text class="filter-label">日期：</text>
            <picker mode="date" :value="dailyFilters.date" @change="onDateChange">
              <view class="picker-input">
                {{ dailyFilters.date || '请选择日期' }}
              </view>
            </picker>
          </view>
        </view>
        <view class="filter-row">
          <view class="filter-item">
            <text class="filter-label">泊位号：</text>
            <input 
              v-model="dailyFilters.berthNumber" 
              class="filter-input" 
              placeholder="请输入泊位号"
            />
          </view>
          <view class="filter-item">
            <text class="filter-label">停车场：</text>
            <input 
              v-model="dailyFilters.parkingLot" 
              class="filter-input" 
              placeholder="请输入停车场"
            />
          </view>
        </view>
        <view class="filter-actions">
          <button class="search-btn" @click="searchDailyReport">查询</button>
          <button class="reset-btn" @click="resetDailyFilters">重置</button>
        </view>
      </view>

      <!-- 汇总数据展示 -->
      <view class="summary-section">
        <view class="summary-title">汇总数据</view>
        <view class="summary-grid">
          <view v-for="(item, index) in dailySummary" :key="index" class="summary-item">
            <text class="summary-label">{{ item.label }}</text>
            <text class="summary-value">{{ item.value }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 财务月/年报表 -->
    <view v-if="activeTab === 1" class="report-content">
      <!-- 筛选区域 -->
      <view class="filter-section">
        <view class="filter-row">
          <view class="filter-item">
            <text class="filter-label">年月：</text>
            <picker mode="date" fields="month" :value="monthlyFilters.yearMonth" @change="onYearMonthChange">
              <view class="picker-input">
                {{ monthlyFilters.yearMonth || '请选择年月' }}
              </view>
            </picker>
          </view>
        </view>
        <view class="filter-actions">
          <button class="search-btn" @click="searchMonthlyReport">查询</button>
          <button class="reset-btn" @click="resetMonthlyFilters">重置</button>
        </view>
      </view>

      <!-- 汇总数据 -->
      <view class="summary-section">
        <view class="summary-title">汇总数据</view>
        <view class="summary-grid">
          <view v-for="(item, index) in monthlySummary" :key="index" class="summary-item">
            <text class="summary-label">{{ item.label }}</text>
            <text class="summary-value">{{ item.value }}</text>
          </view>
        </view>
      </view>

      <!-- 图表展示 -->
      <view class="chart-section">
        <view class="chart-title">趋势图表</view>
        <qiun-data-charts 
          type="line" 
          :opts="chartOpts" 
          :chartData="chartData"
          :canvas2d="true"
        />
      </view>

      <!-- 列表展示 -->
      <view class="list-section">
        <view class="list-title">详细列表</view>
        <view class="list-header">
          <text class="list-cell">停车场</text>
          <text class="list-cell">订单数量</text>
          <text class="list-cell">订单金额</text>
          <text class="list-cell">实收金额</text>
        </view>
        <view v-for="(item, index) in monthlyList" :key="index" class="list-row">
          <text class="list-cell">{{ item.parkingLot }}</text>
          <text class="list-cell">{{ item.orderCount }}</text>
          <text class="list-cell">{{ item.orderAmount }}</text>
          <text class="list-cell">{{ item.actualAmount }}</text>
        </view>
      </view>
    </view>

    <!-- 财务专项报表 -->
    <view v-if="activeTab === 2" class="report-content">
      <!-- 筛选区域 -->
      <view class="filter-section">
        <view class="filter-row">
          <view class="filter-item">
            <text class="filter-label">开始日期：</text>
            <picker mode="date" :value="specialFilters.startDate" @change="onStartDateChange">
              <view class="picker-input">
                {{ specialFilters.startDate || '请选择开始日期' }}
              </view>
            </picker>
          </view>
          <view class="filter-item">
            <text class="filter-label">结束日期：</text>
            <picker mode="date" :value="specialFilters.endDate" @change="onEndDateChange">
              <view class="picker-input">
                {{ specialFilters.endDate || '请选择结束日期' }}
              </view>
            </picker>
          </view>
        </view>
        <view class="filter-row">
          <view class="filter-item">
            <text class="filter-label">停车场：</text>
            <input 
              v-model="specialFilters.parkingLot" 
              class="filter-input" 
              placeholder="请输入停车场"
            />
          </view>
          <view class="filter-item">
            <text class="filter-label">泊位号：</text>
            <input 
              v-model="specialFilters.berthNumber" 
              class="filter-input" 
              placeholder="请输入泊位号"
            />
          </view>
        </view>
        <view class="filter-row">
          <view class="filter-item full-width">
            <text class="filter-label">订单类型：</text>
            <picker :value="specialFilters.orderTypeIndex" :range="orderTypes" @change="onOrderTypeChange">
              <view class="picker-input">
                {{ orderTypes[specialFilters.orderTypeIndex] || '请选择订单类型' }}
              </view>
            </picker>
          </view>
        </view>
        <view class="filter-actions">
          <button class="search-btn" @click="searchSpecialReport">查询</button>
          <button class="reset-btn" @click="resetSpecialFilters">重置</button>
        </view>
      </view>

      <!-- 专项报表列表 -->
      <view class="list-section">
        <view class="list-title">专项报表</view>
        <view class="special-list">
          <view v-for="(item, index) in specialList" :key="index" class="special-item">
            <view class="special-row">
              <text class="special-label">订单号：</text>
              <text class="special-value">{{ item.orderNo }}</text>
            </view>
            <view class="special-row">
              <text class="special-label">应付金额：</text>
              <text class="special-value">¥{{ item.payableAmount }}</text>
            </view>
            <view class="special-row">
              <text class="special-label">实付金额：</text>
              <text class="special-value">¥{{ item.actualAmount }}</text>
            </view>
            <view class="special-row">
              <text class="special-label">优惠金额：</text>
              <text class="special-value">¥{{ item.discountAmount }}</text>
            </view>
            <view class="special-row">
              <text class="special-label">订单类型：</text>
              <text class="special-value">{{ item.orderType }}</text>
            </view>
            <view class="special-row">
              <text class="special-label">停车场：</text>
              <text class="special-value">{{ item.parkingLot }}</text>
            </view>
            <view class="special-row">
              <text class="special-label">泊位号：</text>
              <text class="special-value">{{ item.berthNumber }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// Tabs配置
const tabs = [
  { name: '日报表' },
  { name: '财务月/年报表' },
  { name: '财务专项报表' }
]
const activeTab = ref(0)

// 日报表筛选条件
const dailyFilters = reactive({
  date: '',
  berthNumber: '',
  parkingLot: ''
})

// 月报表筛选条件
const monthlyFilters = reactive({
  yearMonth: ''
})

// 专项报表筛选条件
const specialFilters = reactive({
  startDate: '',
  endDate: '',
  parkingLot: '',
  berthNumber: '',
  orderTypeIndex: 0
})

// 订单类型选项
const orderTypes = ['全部', '临停缴费', '欠费补缴', '月卡续费', '钱包充值']

// 日报表汇总数据
const dailySummary = ref([])

// 月报表汇总数据
const monthlySummary = ref([])

// 月报表列表数据
const monthlyList = ref([])

// 专项报表列表数据
const specialList = ref([])

// 图表配置
const chartOpts = ref({
  color: ['#1890FF', '#52C41A', '#FAAD14'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: true
  },
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2
  },
  extra: {
    line: {
      type: 'straight',
      width: 2
    }
  }
})

// 图表数据
const chartData = ref({})

// 切换Tab
const switchTab = (index) => {
  activeTab.value = index
  if (index === 0) {
    loadDailyReport()
  } else if (index === 1) {
    loadMonthlyReport()
  } else if (index === 2) {
    loadSpecialReport()
  }
}

// 日期选择
const onDateChange = (e) => {
  dailyFilters.date = e.detail.value
}

const onYearMonthChange = (e) => {
  monthlyFilters.yearMonth = e.detail.value
}

const onStartDateChange = (e) => {
  specialFilters.startDate = e.detail.value
}

const onEndDateChange = (e) => {
  specialFilters.endDate = e.detail.value
}

const onOrderTypeChange = (e) => {
  specialFilters.orderTypeIndex = e.detail.value
}

// 查询日报表
const searchDailyReport = () => {
  loadDailyReport()
}

// 重置日报表筛选
const resetDailyFilters = () => {
  dailyFilters.date = ''
  dailyFilters.berthNumber = ''
  dailyFilters.parkingLot = ''
  loadDailyReport()
}

// 查询月报表
const searchMonthlyReport = () => {
  loadMonthlyReport()
}

// 重置月报表筛选
const resetMonthlyFilters = () => {
  monthlyFilters.yearMonth = ''
  loadMonthlyReport()
}

// 查询专项报表
const searchSpecialReport = () => {
  loadSpecialReport()
}

// 重置专项报表筛选
const resetSpecialFilters = () => {
  specialFilters.startDate = ''
  specialFilters.endDate = ''
  specialFilters.parkingLot = ''
  specialFilters.berthNumber = ''
  specialFilters.orderTypeIndex = 0
  loadSpecialReport()
}

// 加载日报表数据
const loadDailyReport = () => {
  // 模拟数据
  dailySummary.value = [
    { label: '订单数', value: '1,234' },
    { label: '订单金额', value: '¥12,345.67' },
    { label: '实收金额', value: '¥11,234.56' },
    { label: '钱包充值金额', value: '¥2,345.67' },
    { label: '退款金额', value: '¥234.56' },
    { label: '余额支付', value: '¥3,456.78' },
    { label: '微信支付', value: '¥4,567.89' },
    { label: '支付宝支付', value: '¥2,345.67' },
    { label: '银行支付', value: '¥1,234.56' },
    { label: '现金支付', value: '¥345.67' }
  ]
}

// 加载月报表数据
const loadMonthlyReport = () => {
  // 模拟汇总数据
  monthlySummary.value = [
    { label: '订单实收', value: '¥123,456.78' },
    { label: '银行实收', value: '¥23,456.78' },
    { label: '补缴总额', value: '¥3,456.78' },
    { label: '钱包充值', value: '¥12,345.67' },
    { label: '泊位实收', value: '¥98,765.43' },
    { label: '退款金额', value: '¥2,345.67' },
    { label: '月卡续费', value: '¥15,678.90' }
  ]

  // 模拟图表数据
  const categories = ['1月', '2月', '3月', '4月', '5月', '6月']
  const series = [
    {
      name: '订单收入',
      data: [12000, 15000, 18000, 16000, 20000, 22000]
    },
    {
      name: '银行收入',
      data: [8000, 9000, 11000, 10000, 12000, 13000]
    },
    {
      name: '钱包收支',
      data: [3000, 4000, 5000, 4500, 6000, 6500]
    }
  ]

  chartData.value = {
    categories,
    series
  }

  // 模拟列表数据
  monthlyList.value = [
    {
      parkingLot: '停车场A',
      orderCount: 1234,
      orderAmount: '¥12,345.67',
      actualAmount: '¥11,234.56'
    },
    {
      parkingLot: '停车场B',
      orderCount: 987,
      orderAmount: '¥9,876.54',
      actualAmount: '¥8,765.43'
    },
    {
      parkingLot: '停车场C',
      orderCount: 567,
      orderAmount: '¥5,678.90',
      actualAmount: '¥4,567.89'
    }
  ]
}

// 加载专项报表数据
const loadSpecialReport = () => {
  // 模拟数据
  specialList.value = [
    {
      orderNo: 'ORD202501010001',
      payableAmount: '25.00',
      actualAmount: '20.00',
      discountAmount: '5.00',
      orderType: '临停缴费',
      parkingLot: '停车场A',
      berthNumber: 'A001'
    },
    {
      orderNo: 'ORD202501010002',
      payableAmount: '50.00',
      actualAmount: '50.00',
      discountAmount: '0.00',
      orderType: '欠费补缴',
      parkingLot: '停车场B',
      berthNumber: 'B002'
    },
    {
      orderNo: 'ORD202501010003',
      payableAmount: '200.00',
      actualAmount: '200.00',
      discountAmount: '0.00',
      orderType: '月卡续费',
      parkingLot: '停车场C',
      berthNumber: 'C003'
    }
  ]
}

// 页面加载时初始化数据
onMounted(() => {
  loadDailyReport()
})
</script>

<style scoped>
.finance-center {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.tabs-container {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 20rpx;
  font-size: 28rpx;
  color: #666;
  border-bottom: 3rpx solid transparent;
  transition: all 0.3s;
}

.tab-item.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
  font-weight: bold;
}

.report-content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
}

.filter-section {
  margin-bottom: 30rpx;
}

.filter-row {
  display: flex;
  margin-bottom: 20rpx;
  gap: 20rpx;
}

.filter-item {
  flex: 1;
  display: flex;
  align-items: center;
}

.filter-item.full-width {
  flex: 2;
}

.filter-label {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
  white-space: nowrap;
}

.filter-input {
  flex: 1;
  padding: 15rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.picker-input {
  flex: 1;
  padding: 15rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}

.filter-actions {
  display: flex;
  gap: 20rpx;
  justify-content: center;
  margin-top: 20rpx;
}

.search-btn {
  background-color: #1890ff;
  color: #fff;
  border: none;
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666;
  border: none;
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.summary-section {
  margin-bottom: 30rpx;
}

.summary-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.summary-item {
  background-color: #f8f9fa;
  padding: 25rpx;
  border-radius: 8rpx;
  text-align: center;
}

.summary-label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.summary-value {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.chart-section {
  margin-bottom: 30rpx;
}

.chart-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.list-section {
  margin-bottom: 30rpx;
}

.list-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.list-header {
  display: flex;
  background-color: #f8f9fa;
  padding: 20rpx;
  border-radius: 8rpx 8rpx 0 0;
  border-bottom: 1px solid #eee;
}

.list-row {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}

.list-cell {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
  color: #333;
}

.special-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.special-item {
  background-color: #f8f9fa;
  padding: 25rpx;
  border-radius: 8rpx;
}

.special-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.special-row:last-child {
  margin-bottom: 0;
}

.special-label {
  font-size: 26rpx;
  color: #666;
}

.special-value {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
}
</style>